<!-- InterviewDetail.vue -->
<template>
	<div class="detail-container layout-pd">
		<el-button type="primary" plain @click="router.go(-1)" class="back-btn">
			<el-icon><ArrowLeft /></el-icon>
			返回列表
		</el-button>

		<div v-if="interviewDetail" class="detail-card">
			<!-- 头部信息 -->
			<div class="detail-header">
				<div class="title-group">
					<h1>{{ interviewDetail.company }}</h1>
					<h2>{{ interviewDetail.position }}</h2>
				</div>
				<div class="meta-group">
					<el-tag :type="getDifficultyType(interviewDetail.difficulty)" effect="plain" size="large"> 难度：{{ interviewDetail.difficulty }} </el-tag>
					<div class="stats">
						<span class="time">发布于 {{ interviewDetail.postTime }}</span>
						<span class="likes">
							<el-icon :class="{ liked: isLiked }" @click="toggleLike">
								<StarFilled v-if="isLiked" />
								<Star v-else />
							</el-icon>
							{{ displayedLikes }}
						</span>
					</div>
				</div>
			</div>

			<!-- 内容区块 -->
			<div class="detail-content">
				<!-- 面试流程 -->
				<section class="process-section">
					<h3>面试流程</h3>
					<timeline>
						<timeline-item v-for="(step, index) in interviewDetail.process" :key="index">
							<div class="step">
								<span class="step-title">{{ step.stage }}</span>
								<p class="step-content">{{ step.description }}</p>
								<span class="step-duration">{{ step.duration }}分钟</span>
							</div>
						</timeline-item>
					</timeline>
				</section>

				<!-- 详细经验 -->
				<section class="experience-section">
					<h3>详细经验</h3>
					<div class="content-box">
						<p v-for="(para, index) in interviewDetail.experience.split('\n')" :key="index">{{ para }}</p>
					</div>
				</section>

				<!-- 推荐资料 -->
				<section class="recommend-section">
					<h3>推荐资料</h3>
					<el-collapse>
						<el-collapse-item v-for="(item, index) in interviewDetail.recommendations" :title="item.title" :name="index" :key="index">
							<div class="recommend-content">
								<p>{{ item.description }}</p>
								<el-link :href="item.link" target="_blank" type="primary">查看详情</el-link>
							</div>
						</el-collapse-item>
					</el-collapse>
				</section>

				<!-- 联系方式 -->
				<section class="contact-section">
					<h3>联系方式</h3>
					<div class="contact-card">
						<div class="contact-info">
							<el-avatar :size="60" :src="interviewDetail.author.avatar" />
							<div class="info">
								<span class="name">{{ interviewDetail.author.name }}</span>
								<span class="email">{{ interviewDetail.author.email }}</span>
								<span class="wechat">微信：{{ interviewDetail.author.wechat }}</span>
							</div>
						</div>
						<el-divider />
						<p class="notice">* 如需联系请说明来自面试经验平台</p>
					</div>
				</section>
			</div>
		</div>

		<el-empty v-else description="未找到该面试经验" />
	</div>
	<!-- 评论区域 -->
	<div class="comments-section">
		<el-button type="primary" @click="toggleComments" round class="toggle-comments-btn">
			{{ showComments ? '隐藏评论' : '显示评论' }}
		</el-button>
		<div v-if="showComments" class="comments-container">
			<!-- 评论发布表单 -->
			<el-card shadow="hover" class="comment-form">
				<h3>发表评论</h3>
				<el-input v-model="newComment" type="textarea" :rows="3" placeholder="写下你的评论..." maxlength="500" show-word-limit />
				<div class="form-actions">
					<el-button type="primary" @click="submitComment" :disabled="!newComment.trim()"> 发布评论 </el-button>
				</div>
			</el-card>

			<!-- 评论列表 -->
			<div class="comment-list">
				<h3>全部评论 ({{ state.comments.length }})</h3>

				<div v-if="state.comments.length === 0" class="empty-comments">
					<el-empty description="暂无评论，快来发表你的看法吧~" />
				</div>

				<el-card v-for="(comment, index) in state.comments" :key="index" shadow="hover" class="comment-item">
					<div class="comment-header">
						<div class="user-info">
							<el-avatar :size="40" :src="comment.avatar" />
							<div class="user-meta">
								<span class="username">{{ comment.username }}</span>
								<span class="time">{{ comment.time }}</span>
							</div>
						</div>
						<el-tag v-if="comment.isAuthor" type="success" size="small">作者</el-tag>
					</div>
					<div class="comment-content">
						{{ comment.content }}
					</div>
					<div class="comment-actions">
						<el-button type="text" @click="likeComment(index)">
							<el-icon><Thumb /></el-icon>
							{{ comment.likes }} 赞
						</el-button>
						<el-button type="text" @click="replyToComment(index)">
							<el-icon><ChatDotRound /></el-icon>
							回复
						</el-button>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ArrowLeft, Star, StarFilled } from '@element-plus/icons-vue';

interface InterviewDetail {
	id: number;
	company: string;
	position: string;
	difficulty: string;
	postTime: string;
	process: {
		stage: string;
		description: string;
		duration: number;
	}[];
	experience: string;
	recommendations: {
		title: string;
		description: string;
		link: string;
	}[];
	author: {
		name: string;
		email: string;
		wechat: string;
		avatar: string;
	};
	likes: number;
}
const router = useRouter();
const interviewDetail = ref<InterviewDetail | null>(null);
const isLiked = ref(false);
const displayedLikes = ref(0);
const state = reactive({
	comments: [
		{
			username: 'Java爱好者',
			avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
			content: '讲得非常详细，特别是红黑树的部分，解决了我一直以来的困惑！',
			time: '2025-04-01 10:30',
			likes: 15,
			isAuthor: false,
		},
		{
			username: '架构师老王',
			avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
			content: '关于扩容机制的解释很清晰，建议补充一下JDK7和JDK8在扩容时的具体区别。',
			time: '2025-04-02 14:45',
			likes: 8,
			isAuthor: true,
		},
	],
});

// 模拟数据获取
onMounted(() => {
	// 根据路由参数获取详情数据
	const mockData: InterviewDetail = {
		id: 1,
		company: '阿里巴巴',
		position: '前端开发工程师',
		difficulty: '困难',
		postTime: '2024-03-15',
		process: [
			{
				stage: '技术一面',
				description: '重点考察JavaScript基础，包含作用域、闭包、原型链等知识点',
				duration: 45,
			},
			{
				stage: '技术二面',
				description: '项目架构设计，需要画出现有项目的技术架构图并解释设计思路',
				duration: 60,
			},
			{
				stage: 'HR面试',
				description: '职业规划、团队协作能力、离职原因等常规问题',
				duration: 30,
			},
		],
		experience: `整个面试过程持续了2周，技术面难度较高需要注意：
  1. 算法题需要手写虚拟滚动列表实现
  2. Vue3响应式原理要求画图说明
  3. 项目难点需要准备具体数据支撑
  建议提前准备至少3个完整项目的深度总结`,
		recommendations: [
			{
				title: '《JavaScript高级程序设计》',
				description: '重点阅读第4/6/7章，掌握核心概念',
				link: 'https://example.com',
			},
			{
				title: 'Vue官方文档',
				description: '特别是Composition API和响应式原理部分',
				link: 'https://vuejs.org',
			},
		],
		author: {
			name: '张三',
			email: 'zhangsan@example.com',
			wechat: 'zhangsan_2024',
			avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
		},
		likes: 45,
	};

	interviewDetail.value = mockData;
	displayedLikes.value = mockData.likes;
});

// 点赞功能
const toggleLike = () => {
	isLiked.value = !isLiked.value;
	displayedLikes.value += isLiked.value ? 1 : -1;
};

// 难度标签样式
const getDifficultyType = (difficulty: string) => {
	const map: Record<string, string> = {
		简单: 'success',
		中等: 'warning',
		困难: 'danger',
	};
	return map[difficulty] || 'info';
};
const showComments = ref(false);
const newComment = ref('');

const toggleComments = () => {
	showComments.value = !showComments.value;
};

const submitComment = () => {
	if (!newComment.value.trim()) return;

	state.comments.unshift({
		username: '当前用户',
		avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
		content: newComment.value.trim(),
		time: '刚刚',
		likes: 0,
		isAuthor: false,
	});

	newComment.value = '';
	ElMessage.success('评论发布成功');
};

const likeComment = (index: number) => {
	state.comments[index].likes++;
	ElMessage.success('点赞成功');
};

const replyToComment = (index: number) => {
	const username = state.comments[index].username;
	newComment.value = `@${username} `;
	ElMessage.info(`正在回复 ${username}`);
};
</script>

<style scoped>
.detail-container {
	margin: 0 auto;
	padding: 30px 20px;
	width: 95%;
}

.back-btn {
	margin-bottom: 30px;
}

.detail-card {
	background: white;
	border-radius: 12px;
	padding: 40px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.detail-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
}

.title-group h1 {
	font-size: 32px;
	margin: 0 0 10px;
}

.title-group h2 {
	font-size: 24px;
	color: #666;
	margin: 0;
}

.meta-group {
	text-align: right;
}

.stats {
	margin-top: 15px;
	color: #999;
}

.stats .likes {
	margin-left: 20px;
	cursor: pointer;
}

.stats .el-icon {
	vertical-align: middle;
	margin-right: 5px;
	color: #f56c6c;
}

.liked .el-icon {
	color: #e6a23c;
}

/* 内容区块样式 */
.detail-content {
	line-height: 1.8;
}

.detail-content h3 {
	font-size: 20px;
	color: #333;
	border-left: 4px solid #409eff;
	padding-left: 10px;
	margin: 30px 0 20px;
}

.content-box {
	background: #f8f9fa;
	padding: 20px;
	border-radius: 8px;
}

/* 时间线样式 */
:deep(.el-timeline-item__timestamp) {
	color: #666;
	font-size: 14px;
}

.step {
	background: #f8f9fa;
	padding: 15px;
	border-radius: 6px;
}

.step-title {
	font-weight: bold;
	display: block;
	margin-bottom: 8px;
}

.step-duration {
	float: right;
	color: #999;
}

/* 联系方式卡片 */
.contact-card {
	background: #f8f9fa;
	padding: 20px;
	border-radius: 8px;
}

.contact-info {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.info {
	margin-left: 20px;
}

.info span {
	display: block;
	margin: 5px 0;
}

.name {
	font-weight: bold;
}

.notice {
	color: #999;
	font-size: 12px;
	margin-top: 10px;
}
.comments-section {
	margin-top: 40px;
	padding: 0 10px;

	.toggle-comments-btn {
		display: block;
		margin: 0 auto 20px;
		padding: 12px 24px;
		font-size: 16px;

		.el-icon {
			margin-right: 6px;
		}
	}

	.comments-container {
		margin-top: 20px;
		border-top: 1px solid #eee;
		padding-top: 20px;

		.comment-form {
			margin-bottom: 30px;

			h3 {
				margin-top: 0;
				margin-bottom: 15px;
				font-size: 18px;
				color: #333;
			}

			.form-actions {
				margin-top: 15px;
				text-align: right;
			}
		}

		.comment-list {
			h3 {
				font-size: 18px;
				color: #333;
				margin-bottom: 20px;
				padding-bottom: 10px;
				border-bottom: 1px solid #eee;
			}

			.empty-comments {
				margin: 40px 0;
			}

			.comment-item {
				margin-bottom: 20px;

				.comment-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12px;

					.user-info {
						display: flex;
						align-items: center;

						.user-meta {
							margin-left: 10px;
							display: flex;
							flex-direction: column;

							.username {
								font-weight: 500;
								font-size: 15px;
							}

							.time {
								font-size: 12px;
								color: #999;
								margin-top: 2px;
							}
						}
					}
				}

				.comment-content {
					font-size: 15px;
					line-height: 1.6;
					color: #333;
					margin-bottom: 12px;
					white-space: pre-line;
				}

				.comment-actions {
					text-align: right;

					.el-button {
						padding: 0 8px;
						font-size: 13px;
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.comments-section {
		.comments-container {
			padding: 15px 0;

			.comment-form {
				padding: 15px;
			}

			.comment-item {
				padding: 15px;
			}
		}
	}
}
</style>
